<template>
  <div id="CargoAnalysis" class="cargo_analysis">
    <div class="time_slot">
      <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="KindName" class="tab01" />
      <div class="optionsBox">
        <el-date-picker
          class="long_time"
          v-model="liveTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          prefix-icon="el-icon-arrow-down"
          unlink-panels
          :clearable="false"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="onPick1"
        ></el-date-picker>
      </div>
    </div>
    <div class="detail_first-wrap">
      <div class="live_top">
        <div class="line"></div>
        <div class="text">带货数据</div>
      </div>
      <ul class="preview_list" v-if="!loading1">
        <li class="preview_list-box">
          <div>{{ goodsData.totalGoods }}</div>
          <div>商品数</div>
        </li>
        <li class="preview_list-box">
          <div>{{ goodsData.liveProduct }}</div>
          <div>直播商品数</div>
        </li>

        <li class="preview_list-box">
          <div>{{ goodsData.awemeProduct }}</div>
          <div>视频商品数</div>
        </li>
        <li class="live_list-line"></li>
        <li class="preview_list-box">
          <div>{{ format_num(goodsData.wholeNetworkVolumme) }}</div>
          <div>全网销量(件)</div>
        </li>

        <li class="preview_list-box">
          <div>{{ format_num(goodsData.liveVolume) }}</div>
          <div>直播销量(件)</div>
        </li>

        <li class="preview_list-box">
          <div>{{ format_num(goodsData.elseVolume) }}</div>
          <div>其它销量(件)</div>
        </li>
        <li class="live_list-line"></li>
        <li class="preview_list-box">
          <div>{{ format_num(goodsData.wholeNetworkAmount) }}</div>
          <div>全网销售额</div>
        </li>
        <li class="preview_list-box">
          <div>{{ format_num(goodsData.livesales) }}</div>
          <div>直播销售额</div>
        </li>
        <li class="preview_list-box">
          <div>{{ format_num(goodsData.elseAmount) }}</div>
          <div>其它销售额</div>
        </li>
      </ul>
      <div
        v-loading="loading1"
        v-if="loading1"
        class="loading"
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <div class="detail_second-wrap">
      <div class="second_left">
        <div class="live_top">
          <div class="line"></div>
          <div class="text">商品类目分布</div>
        </div>
        <div class="second_left-echart" v-if="categoryRate.length != 0 && !loading2">
          <PieChart :PieData="categoryRate" Etitle="商品类目分布" />
        </div>
        <div class="no_data" v-if="!loading2 && categoryRate.length == 0">
          <img src="@/assets/shi/zanwushuju.png" alt />
          暂无数据
        </div>
        <div
          v-loading="loading2"
          v-if="loading2"
          class="loading"
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <div class="second_right">
        <div class="live_top">
          <div class="line"></div>
          <div class="text">商品价格分布</div>
        </div>
        <div class="second_right-echart" v-if="priceRate.length != 0 && !loading2">
          <PieChart :PieData="priceRate" Etitle="商品价格分布" />
        </div>
        <div class="no_data" v-if="priceRate.length == 0 && !loading2">
          <img src="@/assets/shi/zanwushuju.png" alt />
          暂无数据
        </div>
        <div
          v-loading="loading2"
          v-if="loading2"
          class="loading"
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
    </div>
    <div class="category_list">
      <div class="live_top" mb>
        <div class="line"></div>
        <div class="text">商品列表</div>
      </div>
      <!-- <div class="category">
        <radioGroupWithNum
          isSearch="1"
          :radio_values="proKindList"
          v-model="proKind"
          title="商品类目"
          class="mt_10"
        />
      </div>-->
      <dl>
        <dt>达人行业</dt>
        <dd ref="ovBox" :class="[{ overstep: isOverstep }, { is_unfold: isUnfold }]">
          <div class="cg_items" ref="ovChild">
            <span
              v-for="(item, idx) in proKindList"
              :key="idx + 'cdi'"
              :class="{ active: item.name == proKind }"
              @click="getCondition(item)"
            >{{ item.name }}</span>
            <i @click="unfoldFn">{{ isUnfold ? "收起" : "展开" }}</i>
          </div>
        </dd>
      </dl>
      <!-- <div class="store">
        <radioGroupWithNum
          isSearch="1"
          :radio_values="shopList"
          v-model="shop"
          title="合作小店"
          class="mt_10"
        />
      </div>-->
      <dl>
        <dt>合作小店</dt>
        <dd ref="ovBox" :class="[{ overstep: isOverstep }, { is_unfold: isUnfold2 }]">
          <div class="cg_items" ref="ovChild">
            <span
              v-for="(item, idx) in shopList"
              :key="idx + 'cdi'"
              :class="{ active: item.name == shop }"
              @click="getCondition2(item)"
            >{{ item.name }}</span>
            <i @click="unfoldFn2">{{ isUnfold2 ? "收起" : "展开" }}</i>
          </div>
        </dd>
      </dl>
      <div class="store">
        <radioGroupWithNum
          isSearch="1"
          :radio_values="shopKindList"
          v-model="shopKind"
          title="商品来源"
          class="mt_10"
        />
      </div>
      <div class="commerce">
        <radioGroupWithNum
          isSearch="1"
          :radio_values="goodsTypeList"
          v-model="goodsType"
          title="带货类型"
          class="mt_10"
        />
      </div>
      <div class="section">
        <radioGroupWithNum
          isSearch="1"
          :radio_values="priceList"
          v-model="price"
          title="价格区间"
          class="mt_10"
        />
      </div>
      <section class="search01">
        <div class="searchBox">
          <el-input v-model="keyword" placeholder="请输入商品关键词搜索" @keyup.enter.native="toSearch"></el-input>
          <div class="imgBox" @click="toSearch">
            <img src="@/assets/wang/talentCompare/search.png" />
          </div>
        </div>
      </section>
      <div class="last_list">
        <section ref="capture">
          <table class="table" ref="tableEl">
            <thead>
              <tr ref="th_tr_El">
                <th>商品</th>
                <th>商品类目</th>
                <th
                  v-if="orderType == 1 && sortValue == 0"
                  @click="sort_fun(true, 0)"
                  class="cursor"
                >
                  券后价
                  <img src="@/assets/meng/down_up.png" v-if="orderType == 1 && sortValue == 0" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
                <th v-else @click="sort_fun(false, 0)" class="cursor">
                  券后价
                  <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 0" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
                <th
                  @click="sort_fun(true, 1)"
                  v-if="orderType == 1 && sortValue == 1"
                  class="cursor"
                >
                  销量
                  <img src="@/assets/meng/down_up.png" v-if="orderType == 1 && sortValue == 1" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
                <th v-else @click="sort_fun(false, 1)" class="cursor">
                  销量
                  <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 1" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
                <th
                  @click="sort_fun(true, 2)"
                  v-if="orderType == 1 && sortValue == 2"
                  class="cursor"
                >
                  销售额
                  <img
                    ml
                    src="@/assets/meng/down_up.png"
                    v-if="orderType == 1 && sortValue == 2"
                    class="m_l"
                  />
                  <img src="@/assets/meng/no_down_up.png" v-else class="m_l" />
                </th>
                <th v-else @click="sort_fun(false, 2)" class="cursor">
                  销售额
                  <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 2" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
                <th
                  @click="sort_fun(true, 3)"
                  v-if="orderType == 1 && sortValue == 3"
                  class="cursor"
                >
                  关联直播数
                  <img src="@/assets/meng/down_up.png" v-if="orderType == 1 && sortValue == 3" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
                <th v-else @click="sort_fun(false, 3)" class="cursor">
                  关联直播数
                  <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 3" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
                <th
                  @click="sort_fun(true, 4)"
                  v-if="orderType == 1 && sortValue == 4"
                  class="cursor"
                >
                  关联视频数
                  <img src="@/assets/meng/down_up.png" v-if="orderType == 1 && sortValue == 4" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
                <th v-else @click="sort_fun(false, 4)" class="cursor">
                  关联视频数
                  <img src="@/assets/meng/up_down.png" v-if="orderType == 0 && sortValue == 4" />
                  <img src="@/assets/meng/no_down_up.png" v-else />
                </th>
              </tr>
            </thead>
            <tbody v-if="!loading3">
              <tr v-for="(item, index) in listData" :key="index">
                <td>
                  <div class="rightBox" @click="toGoodsDtl(item.pro_id)">
                    <div class="picture">
                      <img :src="item.pro_logo" alt />
                    </div>
                    <div class="info">
                      <div class="info_top">{{ item.pro_title }}</div>
                    </div>
                  </div>
                </td>
                <td>{{ item.proCategoryName }}</td>
                <td>{{ item.couponPrice }}</td>
                <td>{{ format_num(item.volume) }}</td>
                <td>{{ format_num(item.amount) }}</td>
                <td>{{ format_num(item.live_count) }}</td>
                <td>{{ format_num(item.video_count) }}</td>
              </tr>
            </tbody>
          </table>
          <div class="pageBox" v-if="listData.length!=0">
            <el-pagination
              background
              layout="prev, pager, next, jumper"
              :total="totalCount"
              :page-size="9"
              :current-page="page"
              @current-change="get_data"
              :hide-on-single-page="true"
            ></el-pagination>
          </div>
          <div class="no_data" v-if="listData.length == 0 && !loading3">
            <img src="@/assets/shi/zanwushuju.png" alt />
            暂无数据
          </div>
          <div
            v-loading="loading3"
            v-if="loading3"
            class="loading"
            element-loading-spinner="el-icon-loading"
          ></div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from "./PieChart.vue";
import BarChart from "./BarChart.vue";
import RadioGroupWithNum from "@/component/radioGroupWithNum.vue";
let typeData = [
  //商品来源
  {
    name: "不限",
    value: -1,
  },
  {
    name: "直播",
    value: 1,
  },
  {
    name: "视频",
    value: 0,
  },
];
let shopKindData = [
  //商品来源
  {
    name: "不限",
    value: -1,
  },
  {
    name: "小店",
    value: 1,
  },
  {
    name: "京东",
    value: 2,
  },
  {
    name: "淘宝",
    value: 3,
  },
  {
    name: "天猫",
    value: 4,
  },
  {
    name: "苏宁",
    value: 5,
  },
  {
    name: "考拉",
    value: 6,
  },
];
let priceData = [
  {
    name: "不限",
    value: -1,
  },
  {
    name: "0-50",
    value: 1,
  },
  {
    name: "50-100",
    value: 2,
  },
  {
    name: "100-500",
    value: 3,
  },
  {
    name: "500-1000",
    value: 4,
  },
  {
    name: "1000-5000",
    value: 5,
  },
  {
    name: "5000-1w",
    value: 6,
  },
  {
    name: "1w以上",
    value: 7,
  },
];
export default {
  name: "CargoAnalysis",
  props: {},
  data() {
    return {
      aaa: true,
      keyword: "",
      pickerOptions: "",
      liveTime: "",
      checked: false,
      KindName: "近7天",

      loading1: false,
      loading2: false,
      loading3: false,
      // 页面数据
      goodsData: {},
      categoryRate: [],
      priceRate: [],
      // 列表数据
      listData: [],

      // 分类
      proKindList: [], //商品类目
      proKind: "全部",
      shopKindList: shopKindData, //商品来源
      shopKind: "不限",
      kindValue: -1,
      //合作小店
      shopList: [], //合作小店
      shop: "全部",
      shopValue: -1,
      priceList: priceData, //价格区间
      price: "不限",
      goodsTypeList: typeData, //带货来源
      goodsType: "不限",
      totalCount: 0,
      page: 1,
      sortValue: 1,
      orderType: 1,

      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      isUnfold2: false,
    };
  },
  components: { PieChart, BarChart, RadioGroupWithNum },
  computed: {
    changeData() {
      const { proKind, shopKind, shop, price, goodsType } = this;
      return {
        proKind,
        shopKind,
        shop,
        price,
        goodsType,
      };
    },
  },
  created() {
    this.getTimeSlot();
    this.getCategoryAnalyse();
  },
  mounted() {
    // this.setCondition ();
  },
  watch: {
    KindName: function (newVal, oldVal) {
      (this.shopKind = "不限"),
        (this.price = "不限"),
        (this.goodsType = "不限"),
        (this.shopValue = -1),
        (this.kindValue = -1),
        (this.proKind = "全部"),
        (this.shop = "全部"),
        (this.page = 1);
      this.getTimeSlot();
    },
    changeData() {
      this.page = 1;
      this.getListData();
    },
  },
  methods: {
    getCondition(itemObj) {
      //点击达人行业选项
      this.proKind = itemObj.name;
      this.kindValue = itemObj.value;
    },
    getCondition2(itemObj) {
      //点击达人行业选项
      this.shop = itemObj.name;
      this.shopValue = itemObj.value;
    },
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
    },
    unfoldFn2() {
      this.isUnfold2 = !this.isUnfold2;
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox;
        if (!box) return;
        let childBox = this.$refs.ovChild;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true;
        }
      });
    },
    // 排序
    sort_fun(parm01, parm02) {
      // console.log(parm02)
      if (parm01) {
        this.orderType = 0;
      } else {
        this.orderType = 1;
      }
      this.sortValue = parm02;
      this.dataList = [];
      this.page = 1;
      this.getListData();
    },

    get_data(e) {
      this.page = e;
      this.getListData();
    },
    onPick1() {
      this.KindName = "";
      this.page = 1;
      this.getTimeSlot();
    },
    toSearch() {
      this.page = 1;
      this.getListData();
    },
    // 获取时间
    getTimeSlot() {
      switch (this.KindName) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );

          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
      this.getGoodsData();
      this.getCategoryTrend();
      this.getListData();
    },
    getGoodsData() {
      this.goodsData = [];
      this.loading1 = true;
      this.$axios
        .get("/api/Author/CommerceData", {
          params: {
            authorId: this.$route.params.id,
            star_time: this.startDate,
            end_time: this.endDate,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.loading1 = false;
            this.goodsData = res.data.data;
          }
        });
    },
    // Echarts图表数据
    getCategoryTrend() {
      this.loading2 = true;
      this.categoryRate = [];
      this.priceRate = [];
      this.$axios
        .get("/api/Author/PriceAndCategoryTrend", {
          params: {
            authorId: this.$route.params.id,
            star_time: this.startDate,
            end_time: this.endDate,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.loading2 = false;
            this.categoryRate = res.data.data.categoryRate;
            this.priceRate = res.data.data.priceRate;
          }
        });
    },

    // 商品类目, 合作小店, 商品来源
    getCategoryAnalyse() {
      this.$axios
        .get("/api/Author/GetAuthorShopCategoryAnalyse", {
          params: {
            authorId: this.$route.params.id,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.proKindList = res.data.data.category; // 商品类目
            //this.shopKindList = res.data.data.proSource; //商品来源
            this.shopList = res.data.data.shop; //合作小店
            //this.priceList = res.data.data.price; //价格区间
            // this.getListData();
            this.getListData();
            this.setCondition();
          }
        });
    },

    // 列表数据
    // /api/Author/GetAuthorSellProductData
    getListData() {
      // 商品来源
      this.loading3 = true;
      this.listData = [];
      let FromId = -1;
      this.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          FromId = item.value;
        }
      });
      // 价格
      let ProPrice = -1;
      this.priceList.map((item, index) => {
        if (item.name == this.price) {
          ProPrice = item.value;
        }
      });
      // 合作小店
      // let shopid = -1;
      // this.shopList.map((item, index) => {
      //   if (item.name == this.shop) {
      //     shopid = item.value;
      //   }
      // });
      //品类
      let ProCategory = -1;
      this.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          ProCategory = item.value;
        }
      });
      //带货类型
      let SellProductType = -1;
      this.goodsTypeList.map((item, index) => {
        if (item.name == this.goodsType) {
          SellProductType = item.value;
        }
      });
      this.$axios
        .post("/api/Author/GetAuthorSellProductData", {
          authorId: this.$route.params.id,
          keyword: this.keyword,
          profrom: FromId,
          ProPrice: ProPrice,
          ProShop: this.shopValue,
          ProCategory: this.kindValue,
          SellProductType: SellProductType,
          page: this.page, //页数
          size: 9, //每页多少条数据
          sort: this.sortValue, //排序字段 0优惠券价 1销量 2 销售额 3 关联直播数 4 关联商品数
          order_by: this.orderType, // 排序方式 0 asc 升序,1 desc 降序,
          star_time: this.startDate,
          end_time: this.endDate,
        })
        .then((res) => {
          this.loading3 = false;
          if (res.data.code == 0) {
            this.listData = res.data.data;
            this.totalCount = res.data.count;
          }
        });
    },
    toGoodsDtl(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.cargo_analysis {
  .time_slot {
    // height: 62px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    .tab01 {
      margin-right: 20px;
    }
  }
  .category_list {
    dl {
      display: flex;
      font-size: 14px;
      margin-bottom: 10px;
      // margin-top: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      dt {
        padding-top: 6px;
        // width: 78px;
        margin-right: 20px;
        flex-shrink: 0;
        color: #888;
      }
      dd {
        position: relative;
        color: #555;
        height: 32px;
        overflow: hidden;
        .cg_items {
          // position: relative;
          display: inline-block;
          font-size: 0;
          span {
            display: inline-block;
            height: 32px;
            padding: 0 16px;
            // margin-bottom: 5px;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            vertical-align: middle;
            &.active {
              color: #fd7f2c;
              background-color: #fff1e8;
              border-radius: 4px;
            }
          }
          i {
            position: absolute;
            display: none;
            right: 0;
            top: 6px;
            font-size: 14px;
            font-style: normal;
            color: #fd7f2c;
            cursor: pointer;
          }
        }
        &.overstep {
          padding-right: 22px;
          .cg_items {
            i {
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
        &.is_unfold {
          padding-right: 0;
          height: inherit;
          .cg_items {
            i {
              position: inherit;
            }
          }
        }
      }
    }
  }
  .live_top {
    display: flex;
    align-items: center;
    color: #222;
    font-weight: 600;
    .line {
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
    }
  }
  /deep/ .radio_item {
    margin-bottom: 0 !important;
  }
  /deep/#radio_group .radio_item_blue {
    color: #fd7f2c !important;
    background-color: #fff1e8 !important;
  }
  .detail_second-wrap {
    display: flex;
    justify-content: space-between;
    .second_left {
      width: 50%;
      .second_left-echart {
        margin-top: 30px;
        height: 300px;
      }
      .no_data {
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #b5b5b5;
      }
    }
    .second_right {
      width: 50%;
      .second_right-echart {
        margin-top: 30px;
        height: 300px;
      }
      .no_data {
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #b5b5b5;
      }
    }
  }

  .detail_first-wrap {
    margin-top: 20px;

    .preview_list {
      display: flex;
      padding: 40px 0 42px;
      flex-wrap: wrap;
      .preview_list-box {
        width: 11%;
        text-align: center;
        // padding-left: 30px;
        box-sizing: border-box;
        div:nth-child(1) {
          font-size: 24px;
          // font-weight: 600;
          font-family: DINAlternate-Bold;
          color: #222;
        }
        div:nth-child(2) {
          font-size: 12px;
          color: #888;
        }
        .time {
          font-size: 16px;
          font-weight: 500;
        }
      }
      .live_list-line {
        width: 1px;
        height: 48px;
        background-color: #efefef;
      }
    }
  }
  table {
    text-align: center;
    margin-top: 14px;
    .cursor {
      cursor: pointer;
    }
    thead {
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
        margin-right: 2px;
        cursor: pointer;
      }
      tr {
        th {
          padding: 0 2px;
        }
        th:first-child {
          text-align: left;
          padding-left: 24px;
        }
        th:nth-child(2) th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6),
        th:nth-child(7) {
          width: 11%;
        }
        th:nth-child(8) {
          width: 14%;
        }
      }
    }
    tbody {
      tr {
        height: 78px;
        td {
          padding: 0 2px;
        }
        td:nth-child(1),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222222;
        }
        td:nth-child(1) {
          width: 20%;
        }
        .info_top {
          width: 240px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .rankNum {
        font-size: 15px;
      }
    }
    // 数量
    .numBox {
      span:nth-of-type(1) {
        font-size: 16px !important;
      }
    }
    // 商品

    .rightBox {
      display: flex;
      align-items: center;
      padding-left: 24px;
      cursor: pointer;
      .picture {
        width: 50px;
        height: 50px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
          object-fit: cover;
        }
      }
      .info {
        margin-left: 10px;
        text-align: left;
        .info_top {
          font-size: 14px;
          color: #222222;
          font-weight: 600;
        }
        .info_top:hover {
          color: #ff924b;
        }
        .info_btm {
          font-size: 13px;
          color: #888888;
          margin-top: 4px;
        }
      }
    }
  }
  .no_data {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b5b5b5;
  }
}
@media screen and (max-width: 1400px) {
  #CargoAnalysis .preview_list {
    padding-top: 20px;
  }
  #CargoAnalysis .preview_list .preview_list-box {
    width: 16%;
    margin-top: 20px;
  }
  #CargoAnalysis .preview_list .preview_list-box div:first-child {
    font-size: 20px;
  }
  #CargoAnalysis .preview_list .live_list-line {
    margin-top: 20px;
  }
}
[mb] {
  margin-bottom: 20px;
}
[ml] {
  margin-left: 4px;
}
</style>
